<template>
	<EChart :id="id"  :class="className" :options="options" >
	</EChart>
</template>
<script>
	import EChart from './EChart'
	export default {
		props: ['xData','yData','y2Data','title','id'],
		components: {
	      EChart
	    },
		data() {
			return {
				className:'',
				options: {}
			}
		},
		watch:{
	        yData:{//深度监听，可监听到对象、数组的变化
	            handler(val, oldVal){
	           		this.initOption()
	            },
	            deep:true
	        },
          y2Data:{//深度监听，可监听到对象、数组的变化
            handler(val, oldVal){
              this.initOption()
            },
            deep:true
          },
	        xData:{//深度监听，可监听到对象、数组的变化
	            handler(val, oldVal){
	           		this.initOption()
	            },
	            deep:true
	        },
	        title:{//深度监听，可监听到对象、数组的变化
	            handler(val, oldVal){
	           		this.initOption()
	            },
	            deep:true
	        }
	    },
		created:function(){
			this.initOption()

		},
		mounted: function(){

	    },
	    methods: {
	    	initOption() {
	    		this.options = {
				 	tooltip: {
				        trigger: 'axis',
				        position: function (pt) {
				            return [pt[0], '10%'];
				        }
				    },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
				    title: {
				        text: this.title,
				        x:'center'
				    },
				    xAxis: {
				        type: 'category',
                boundaryGap: false,
				        data: this.xData
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: this.yData,
				        type: 'line',
				        smooth: true
				    },
              {
                data: this.y2Data,
                type: 'line',
                smooth: true
              }
            ]
				};
	    	}
	    }


	}

</script>

